<template>
  <div class="stat">
    <Title :title="titleData"></Title>
    <StatisticsSearch :options="statisOptions" @submit="onSubmit" />
    <BasicData :basicData="statData"></BasicData>
    <LineCard
      :lineData='statData'
      ref="lineCard"
    ></LineCard>
    <div class="preOuter">
      <PreCard
        :title="`${'入群客户占比'}`"
        :browseData='custAdd'
      ></PreCard>
      <div style="width:16px"></div>
      <PreCard
        :title="`${'客户流失占比'}`"
        :browseData='custlose'
      ></PreCard>
    </div>
    <div style="margin-top: 16px">
      <PreCard
        :title="`${'客户扫码添加时段'}`"
        :browseData="scan"
      ></PreCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Title from './components/Title.vue'
import BasicData from './components/BasicData.vue'
import LineCard from './components/LineCard.vue'
import PreCard from './components/PreCard.vue'
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'

import { groupStat, groupStatBase } from '@/api/smartMarketing/drainage/channelCode/index'
const route = useRoute()
const statId = ref(route.query.id)
const statData = ref({})
const titleData = ref({})
const scan = ref([])
const custAdd = ref([])
const custlose = ref([])
const searchRef = ref()
const lineCard = ref()
const paramsData = reactive({
  create_time: [],
  groupchat_name: ''
})

const statisOptions = reactive([
  {
    label: '时间筛选',
    type: 'dateFilter',
  },
  {
    label: '群聊筛选',
    type: 'input',
    key: 'groupchat_name',
    value: '',
    placeholder: '请输入群聊名称'
  },
])
const onSubmit = (data:any) => {
  paramsData.create_time = data.times
  paramsData.groupchat_name = data.groupchat_name
  console.log(data)
  nextTick(() => {
    lineCard.value.custId = 1
    getData()
  })
}

const submit = (data: any) => {
  lineCard.value.custId = 1
  getData()
}
const dataFun = (data: string, name: string, val: string) => {
  const arr = []
  data.map((i: any) => {
    if (i[val] != 0) {
      arr.push({ name: i[name], value: i[val] })
    }
  })
  return arr
}
const getData = () => {
  const params = {
    activity_id: statId.value,
    create_time:  paramsData.create_time,
    groupchat_name: paramsData.groupchat_name
  }
  groupStatBase({ activity_id: statId.value }).then((res: any) => {
    titleData.value = res
  })
  groupStat(params).then((res: any) => {
    statData.value = res
    custAdd.value = dataFun(res.groupchat, 'groupchat_name', 'total_add')
    custlose.value = dataFun(res.groupchat, 'groupchat_name', 'total_lose')
    scan.value = dataFun(res.scan, 'time', 'total')
  })
}

onMounted(() => {
  // getData()
})
</script>

<style lang="scss" scoped>
.stat {
  .titleCard {
    padding: 0;
    margin-bottom: 16px;
  }
  .formInline {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .heder_card {
    padding: 17px 20px;
  }
  .preOuter {
    display: flex;
    align-items: center;
    margin-top: 16px;
    // justify-content: space-between;
  }
}
</style>
